<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖器</title>
    <style>
        #div {
            width: 330px;
            height: 330px;
            display: flex;
            flex-wrap: wrap;
        }

        #div>div {
            width: 100px;
            height: 100px;
            margin: 5px 5px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            background-color: #33343b;
        }
    </style>
</head>

<body>
    <div id="div">
        <div class="option"></div>
        <div class="option"></div>
        <div class="option"></div>
        <div class="option"></div>
        <div id="start" style="background-color: rgb(45, 131, 102);"></div>
        <div class="option"></div>
        <div class="option"></div>
        <div class="option"></div>
        <div class="option"></div>
    </div>
    <script>
        let btn = document.getElementById("start");
        let options = document.getElementsByClassName("option");
        let timer = null;
        let num = 0;
        btn.onclick = () => {

            if (timer == null) {
                timer = setInterval(() => {
                    num++

                    let ran = Math.round(Math.random() * 7);

                    for (let index = 0; index < options.length; index++) {
                        options[index].style.backgroundColor = "#33343b";

                    }

                    options[ran].style.backgroundColor = "red";

                    if (num >= 5) {
                        clearInterval(timer)
                        timer = null
                    }
                }, 100);
            }
        }
    </script>
</body>

</html>